<script lang="ts" setup>
import {
  getCancelPrePayOrderApi,
  getUserOrderDetailsApi,
  getOrderRefundApi,
  getPopupTipsApi,
  postReplaceApi,
} from '@/services/goods'
import { onShow, onUnload } from '@dcloudio/uni-app'
import { ref, computed, onMounted, watch } from 'vue'
import { useDeviceStore, useMemberStore, useLocationStore, usePhoneStore } from '@/stores'
import { SwitchingTime, Toast, PageSkip } from '@/utils/tools'
import orderStatusBox from './components/orderStatus.vue'

const phoneStore = usePhoneStore()
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const locationStore = useLocationStore()

const query = defineProps<{
  orderId: string
  flag?: boolean
}>()
const options = ref<any>({})

onShow(async () => {
  // 注释掉原有的获取页面参数代码
  let curPages: any = getCurrentPages()
  console.log(curPages[curPages.length - 1].options)
  const option = curPages[curPages.length - 1].options

  // mock options数据
  // const option = {
  //   orderId: 'ORDER2024031500001', // 订单ID
  //   flag: true, // 支付成功标记
  //   type: '', // 订单类型，空字符串表示普通订单，'couponPack'表示优惠券礼包订单
  //   from: 'pay', // 来源页面标记
  // }

  options.value = option
  getBalance()
  getHasPayPassword()
  await getOrderDetails()
  openSetInterval()
  getIsFirstOrder()
})

// 获取用户钱包余额
const getBalance = async () => {
  const res = await getBalanceApi()
  if (res.code === 200) {
    memberStore.setBalanceInfo(res.data)
  }
}

// 获取用户是否存在支付密码
const getHasPayPassword = async () => {
  const res = await getHasPayPasswordApi()
  if (res.code === 200) {
    memberStore.setHasPayPassword(res.data)
  }
}

const tmplIds = ref<string[]>([])
function getIsFirstOrder() {
  getIsFirstOrderApi().then((res) => {
    if (res?.data === 1) {
      tmplIds.value = [
        'gN9DKGzX7t6TdIdfN6OCqeBnW1_rq-M2SkPtOiuBP_M',
        'cvXN4cVzVAtR_H6kZz7CN-7CM_dp1cf7OtOW1S9ywcc',
        'WiLg6P_YrOaHXH8wj7BrYmqIkydnFkDfCm_7ymDnT2E',
      ]
    } else {
      tmplIds.value = [
        'gN9DKGzX7t6TdIdfN6OCqeBnW1_rq-M2SkPtOiuBP_M',
        'cvXN4cVzVAtR_H6kZz7CN-7CM_dp1cf7OtOW1S9ywcc',
      ]
    }
  })
}

/**
 * * popup 支付成功后进入弹出层展示的方法
 */
const popup = ref({
  open: () => {},
  close: () => {},
})
/** 取消原因列表 */
const closeList = [
  { title: '不想要了', icon: 'icon_weixuanzhong' },
  { title: '选错取餐机', icon: 'icon_weixuanzhong' },
  { title: '选错商品/规格', icon: 'icon_weixuanzhong' },
  { title: '服务态度差/体验不佳', icon: 'icon_weixuanzhong' },
  { title: '忘记用优惠券', icon: 'icon_weixuanzhong' },
  { title: '其他原因', icon: 'icon_weixuanzhong' },
]
let current = ref(0)
let reason = ref('不想要了')
const otherReasons = ref('')
let isCancelRefund = false
const _disabled = computed(() => {
  if (current.value === 5 && !otherReasons.value) {
    return true
  } else {
    return false
  }
})
/**点击选择原因 */
const choiceReason = async (e: any, index: number) => {
  console.log(e)
  console.log(index)
  current.value = index
  reason.value = e.title
}
/**取消原因弹出层列表实例 */
const popupRefs = ref<{
  open: () => void
  close: () => void
}>()
/**
 * *  复制订单编号
 */
const copyOrderId = (orderId: string) => {
  uni.setClipboardData({ data: orderId })
}
/**
 * *  提交取消/退款订单
 */
const cancelOrder = async () => {
  popupRefs.value?.close()
  let res: any
  if (isCancelRefund) {
    res = await getCancelPrePayOrderApi({
      orderId: query.orderId,
      refundReason: current.value === 5 ? otherReasons.value : reason.value,
    })
  } else {
    res = await getOrderRefundApi({
      orderId: query.orderId,
      refundReason: current.value === 5 ? otherReasons.value : reason.value,
    })
  }
  console.log(res)
  if (res.code === 200) {
    Toast(isCancelRefund ? '订单已取消' : '订单退款已申请，请稍等')
    // 如果返回的状态是200,就重新调用接口获取订单参数
    getOrderDetails()
  } else {
    Toast(res.msg || isCancelRefund ? '取消失败' : '退款失败，请联系客服')
  }
}
/**
 * *  提交取消/退款礼包订单
 */
const cancelCouponPackOrder = async () => {
  const res = await cancelCouponPackOrderApi({
    orderId: query.orderId,
  })
  console.log(res)
  if (res.code === 200) {
    Toast('订单已取消')
    // 如果返回的状态是200,就重新调用接口获取订单参数
    getOrderDetails()
  } else {
    Toast(res.msg || '取消失败')
  }
}
const enterpriseTime = ref()
const orderType = ref('')
const goodsType = ref(undefined)
const deviceItem = ref()
let status = ref('') // 订单状态
let machineName = ref('') // 设备名称
let machineId = ref('') // 设备 id
let orderId = ref(query.orderId) // 订单id
let price = ref('') // 价格
let createTime = ref<number>() // 下单时间
let endTime = ref<number>() // 支付倒计时
let UpdateTime = ref<number | string>(0)
let saleEndTime = ref<string>()
let payTime = ref<number>()
const orderList = ref<any>()
const orderStatus = ref() //展示给用户看的订单状态
const couponDiscountedPrice = ref() //优惠金额
const awaitNum = ref() // 排队数量
const awaitTime = ref() // 等待时间

/**
 * *  获取订单详情
 */
const getOrderDetails = async () => {
  // 注释掉原有的API调用代码
  const getArg = {
    latitude: locationStore.location!.latitude,
    longitude: locationStore.location!.longitude,
    orderId: query.orderId,
  }
  try {
    const res = await getUserOrderDetailsApi(getArg)
    // const res = mockApiResponse // 使用mock数据
    console.log('获取订单详情', res.data)
    orderStatus.value = res.data.orderStatus
    operationalOnlineStatus.value = res.data.operationalOnlineStatus
    isPickUp.value = res.data.replacementState
    scannedStatus.value = res.data.scannedStatus
    awaitNum.value = res.data.awaitNum
    awaitTime.value = res.data.awaitTime
    enterpriseTime.value = SwitchingTime(res.data.endTime, '年月日')
    orderType.value = res.data.orderType || '1' // 添加默认值
    goodsType.value = res.data.order.goodsType
    deviceItem.value = { ...res.data.deviceInfo }
    machineName.value = res.data.order.machineName
    machineId.value = res.data.order.machineId
    orderId.value = res.data.order.orderId
    price.value = res.data.order.price
    createTime.value = new Date(res.data.order.createTime).getTime()
    endTime.value = createTime.value + 60000 * 3
    UpdateTime.value = res.data.order.updateTime
    orderList.value! = res.data.orderDetailList
    saleEndTime.value = res.data.deviceInfo.saleEndTime
    payTime.value = new Date(res.data.payTime).getTime() + 60000 * 3 // 退款时间改为3分钟
    couponDiscountedPrice.value = res.data.order.couponDiscountMoney || 0
    status.value = res.data.order.status
  } catch (error) {
    console.log(error)
  }
}
/**
 * * totalPrice 总价
 */
const totalPrice = computed(() => {
  return orderList.value?.reduce((prev: number, next: any) => {
    return prev + parseFloat(next.deviceAmount) * next.count
  }, 0)
})
// /**
//  * * paidPrice 实付价格
//  */
// const paidPrice = computed(() => {
//   return orderList.value?.reduce((prev: number, next: any) => {
//     return (
//       prev +
//       parseFloat(orderType.value === '2' ? next.deviceAmount : next.deviceAmount) * next.count
//     )
//   }, 0)
// })
/**点击退款按钮 */
const clickOnRefund = (type: boolean) => {
  isCancelRefund = type
  console.log('options.value', options.value.type)
  if (options.value.type === 'couponPack') {
    cancelCouponPackOrder()
  } else {
    popupRefs.value?.open()
  }
}
/**
 * * 总共多少份餐品
 */
const sumNum = computed(() => {
  return orderList.value?.reduce((prev: number, next: any) => {
    return prev + next.count
  }, 0)
})

/**套餐是否处于待制作状态 */
const isCreationStatus = computed(() => {
  return orderList.value?.every((item: any) => item.status === 'WaitingToBeMade')
})

const isButton = computed(() => {
  const isProduction = orderList.value?.every((item: any) => item.status === 'WaitingToBeMade')
  const newDateVal = ref(new Date().getTime())
  return payTime.value! - newDateVal.value >= 0 && isProduction && orderType.value !== '2'
})
/** 是否展示用户订单状态的盒子 */
const isUserOrderStatusBox = computed(() => {
  if (status.value === 'AwaitPackage') {
    return true
  } else if (UpdateTime.value && status.value === 'Finish') {
    const finishTime = new Date(UpdateTime.value).getTime() + 60000 * 60 // 超时一小时
    const currentTime = new Date().getTime()
    return finishTime >= currentTime
  } else {
    return false
  }
})
/**
 * * userQrCode 二维码
 */
const changeCancelRefund = (type: boolean) => {
  isCancelRefund = type
}

const qrcodeRef = ref()

let loading = ref(false)

/**
 * * 点击设备名称跳转吃饭界面
 */
function clickDeviceSkip() {
  if (deviceItem.value.businessStatus !== '运营中') return Toast('设备不在营业中')
  const deviceInfoItem = {
    ...deviceItem.value,
    machineId: machineId.value,
    machineName: machineName.value,
  }
  deviceStore.setDeviceInfo(deviceInfoItem)
  PageSkip('/pages/eat/eat', 'switchTab')
}
const isFirstThreePopup = ref(false)
/** 获取是否是前三次成功支付 */
const getPopupTips = async () => {
  const res = await getPopupTipsApi()
  isFirstThreePopup.value = res.data
}
watch(
  () => isFirstThreePopup.value,
  (newVal) => {
    if (newVal) {
      if (options.value.type !== 'couponPack') {
        setTimeout(() => {
          popup.value?.open()
        }, 500)
      }
    }
  },
)
onMounted(() => {
  if (query.flag) getPopupTips() // 进入页面的时候判断 是否是成功支付过来
})
/** 返回订单列表页面 */
const backPage = () => {
  PageSkip('/pages/goods/goods', 'switchTab')
}

const _dashed = ref('_dashed')
/** 修改虚线异常展示在输入框中 */
const popupChange = (e: any) => {
  e.show === false ? (_dashed.value = '_dashed') : (_dashed.value = '')
}

import { cancelCouponPackOrderApi } from '@/services/eat'
import { getBalanceApi, getHasPayPasswordApi } from '@/services/wallet'
import { getIsFirstOrderApi } from '@/services/home'
/**点击代取触发 */
const replace = () => {
  uni.showModal({
    content: '您确定要代取吗？',
    confirmColor: '#8ADF4B',
    success: async (success: UniApp.ShowModalRes) => {
      if (success.confirm) {
        const res = await postReplaceApi({ orderId: query.orderId })
        if (res.code === 200) {
          getOrderDetails()
        } else {
          Toast(res.msg)
        }
      }
    },
  })
}

watch(
  () => otherReasons.value,
  (newVal) => {
    if (newVal.length > 200) {
      otherReasons.value = otherReasons.value.slice(0, 200)
    }
  },
)
const scannedStatus = ref()
const isPickUp = ref() // replacementState 是否点击过代取
const operationalOnlineStatus = ref(0) // 客服是否在线
// const replace_disabled = computed(() => {
//   return isPickUp.value === 1 || operationalOnlineStatus.value === 0
// })
const orderStatusRef = ref()
/**全局关闭提示 */
const changeBox = () => {
  orderStatusRef.value.tipsShow = false
  orderStatusRef.value.customerShow = false
}

let timeVal = ref()
/**开启轮询 */
const openSetInterval = () => {
  timeVal.value = setInterval(() => {
    if (status.value === 'AwaitPackage') {
      getOrderDetails()
    } else {
      clearInterval(timeVal.value)
      return
    }
  }, 2000)
}
onUnload(() => {
  clearInterval(timeVal.value)
})
</script>

<template>
  <view class="goodsDetails-box" @tap="changeBox">
    <!-- 页面头部 -->
    <view class="navBar" :style="{ paddingTop: Number(phoneStore.phoneInfo?.top) + 5 + 'px' }">
      <view class="back iconfont icon_base_left" @tap.stop="backPage()"></view>
      <view class="navBarText">订单详情</view>
    </view>
    <!-- 订单状态 -->
    <orderStatusBox
      ref="orderStatusRef"
      :status="status"
      :orderStatus="orderStatus"
      :orderId="orderId"
      :orderType="orderType"
      :goodsType="goodsType"
      :enterpriseTime="enterpriseTime"
      :saleEndTime="saleEndTime"
      :endTime="endTime"
      :isCreationStatus="isCreationStatus"
      :awaitNum="awaitNum"
      :isButton="isButton"
      :couponDiscountedPrice="couponDiscountedPrice"
      :totalPrice="totalPrice"
      :sumNum="sumNum"
      :isUserOrderStatusBox="isUserOrderStatusBox"
      :isPickUp="isPickUp"
      :operationalOnlineStatus="operationalOnlineStatus"
      :tmplIds="tmplIds"
      :type="options.type"
      @popupOpen="getPopupTips()"
      @cancelPopupOpen="clickOnRefund"
      @refresh="getOrderDetails()"
      @changeCancelRefund="changeCancelRefund"
    />
    <!-- 订单信息 -->
    <view class="goodsMessage">
      <view class="goodsMessageHaer" @tap.stop="clickDeviceSkip()">
        <view class="name">{{ machineName }}</view>
        <text class="iconfont icon_arrow-left-1"></text>
      </view>
      <!-- 商品价格 -->
      <view class="myGoods">
        <!-- 循环渲染盒子 -->
        <view class="goodsBox">
          <view class="goodsItem" v-for="item in orderList" :key="item.packageId">
            <image
              class="image"
              :src="item.thumbUrl + '?x-oss-process=image/resize,h_300,m_lfit'"
              mode="scaleToFill"
            />
            <view class="setMeal">
              <view class="setMealName">
                <view class="setMealNameText">{{ item.packageName }}</view>
              </view>
              <view class="setMealSpecification" v-if="goodsType !== 2"
                >{{ item.packageName }} | 餐具</view
              >
              <view class="setMealStatus" v-if="options.type !== 'couponPack'">
                {{
                  item.status === 'WaitingToBeMade'
                    ? '等待制作'
                    : item.status === 'MadeDone'
                    ? '制作完成'
                    : item.status === 'InTheMaking'
                    ? '正在制作'
                    : item.status === 'MakeExceptions'
                    ? '制作异常'
                    : item.status === 'PickupIsComplete'
                    ? '取餐完成'
                    : ''
                }}</view
              >
            </view>
            <view class="price">
              <text class="discountPrice">
                <text class="icon">￥</text> {{ Number(item.deviceAmount).toFixed(2) }}</text
              >
              <!-- <text class="originalPrice" v-show="orderType !== '2'"
                >￥{{ Number(item.deviceAmount).toFixed(2) }}</text
              > -->
              <text class="number">×{{ item.count }}</text>
            </view>
          </view>
        </view>
        <!-- 计算部分 -->
        <view class="compute" :class="{ _dashed }">
          <view class="goodsDisPrice">
            <view class="goodsDisPriceText">商品总额</view>
            <view class="goodsDisPriceNumber">￥{{ Number(totalPrice).toFixed(2) }}</view>
          </view>
          <!-- <view class="goodsOriPrice" v-if="Number(totalPrice) > 0">
            <view class="goodsOriPriceText">商品优惠</view>
            <view class="goodsOriPriceNumber"
              >-￥{{ Number(totalPrice ).toFixed(2) }}</view
            >
          </view> -->

          <!-- 优惠券部分 -->
          <view class="coupon" v-if="couponDiscountedPrice">
            <view class="couponText">优惠券</view>
            <view class="couponTips">
              <view class="couponPrice">-￥{{ Number(couponDiscountedPrice).toFixed(2) }}</view>
            </view>
          </view>
        </view>
        <!-- 实付价格部分 -->
        <view class="paidPrice">
          <view class="paidPrice_1" v-if="Number(couponDiscountedPrice) > 0">已优惠</view>
          <view class="paidPrice_2" v-if="Number(couponDiscountedPrice) > 0"
            >￥{{ Number(couponDiscountedPrice).toFixed(2) }}</view
          >
          <view class="paidPrice_3">合计</view>
          <view class="paidPrice_4"
            ><text class="icon">￥</text
            >{{ Number(totalPrice - couponDiscountedPrice).toFixed(2) }}</view
          >
        </view>
      </view>
    </view>
    <!-- 订单编号信息 -->
    <view class="goodsID">
      <view class="facilityID">
        <view>取餐机编号</view>
        <view>{{ machineId }}</view>
      </view>
      <view class="goodsNumber">
        <view>订单编号</view>
        <view class="ctrl"
          >{{ orderId }}
          <view class="ctrl_CV" @tap.stop="copyOrderId(orderId)">复制</view>
        </view>
      </view>
      <view class="goodsDate">
        <view>下单时间</view>
        <view>
          <uni-dateformat :date="createTime" format="yyyy-MM-dd hh:mm:ss"> </uni-dateformat>
        </view>
      </view>
      <view class="payWay" v-if="status === 'Canceled'">
        <view>取消时间</view>
        <view>
          <uni-dateformat :date="UpdateTime" format="yyyy-MM-dd hh:mm:ss"> </uni-dateformat>
        </view>
      </view>
      <view v-else class="payWay">
        <view>支付方式</view>
        <view>{{
          orderType === '2' ? '企业支付' : orderType === '3' ? '余额支付' : '微信支付'
        }}</view>
      </view>
    </view>
  </view>

  <uni-popup ref="popupRefs" type="bottom" :safe-area="false" @change="popupChange">
    <view class="popupBox">
      <view class="popupHear">取消原因</view>
      <!-- 循环列
         表 -->
      <radio-group class="closeText">
        <label
          class="radio"
          v-for="(item, index) in closeList"
          :key="item.title"
          @tap.stop="choiceReason(item, index)"
          >{{ item.title }}
          <radio
            class="checked"
            color="#ffc65d"
            style="transform: scale(0.7)"
            :checked="current === index"
          />
        </label>
      </radio-group>
      <view class="_textarea" v-show="current === 5">
        <uni-easyinput
          type="textarea"
          :maxlength="200"
          v-model.trim="otherReasons"
          placeholder="请简要描述取消订单的具体原因"
        >
        </uni-easyinput>
        <view class="textareaTpis">{{ otherReasons.length }}/200</view>
      </view>

      <!-- 按钮 -->
      <view class="button">
        <view class="buttonClose" @tap.stop="popupRefs?.close()">再想想</view>
        <button
          class="submit"
          :disabled="_disabled"
          :class="{ active: _disabled }"
          @tap.stop="cancelOrder()"
        >
          确认取消
        </button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="popup" class="_popup" type="center">
    <image
      src="https://yuefanpai.oss-cn-hangzhou.aliyuncs.com/goucango.png"
      class="_image"
      mode="scaleToFill"
    />
    <view class="iconfont icon_Frame-1" @tap.stop="popup?.close()"></view>
  </uni-popup>
</template>
<style lang="scss">
.goodsDetails-box {
  background-color: #f5f5f5;
  padding-bottom: 60rpx;
  min-height: 100vh;
}
.navBar {
  position: relative;
  padding-bottom: 22rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-bottom: 24rpx;
  .back {
    height: 80rpx;
    line-height: 70rpx;
    width: 80rpx;
    position: absolute;
    bottom: 0;
    left: 30rpx;
    font-size: 32rpx;
    color: #000;
    z-index: 999;
  }

  .navBarText {
    font-size: 32rpx;
    color: #000000e5;
    margin: 0 auto;
  }
}

.goodsMessage,
.goodsID {
  width: 702rpx;
  margin: 0 24rpx;
  padding: 30rpx 28rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0rpx 4rpx 198rpx 2rpx rgba(0, 0, 0, 0.05);
}

// 订单信息
.goodsMessageHaer {
  display: flex;
  font-size: 28rpx;
  align-items: center;
  color: #212121;
  font-weight: bold;
  .iconfont {
    margin-left: 16rpx;
    font-size: 20rpx;
  }
}
// 计算商品价格
.myGoods {
  width: 100%;
  margin-top: 20rpx;
  border-radius: 16rpx;
  background-color: #fff;
}
// 商品循环 item
.goodsItem {
  display: flex;
  margin-bottom: 28rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
  padding: 28rpx 20rpx 28rpx 40rpx;
  align-items: center;
  .image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
  }
  .setMeal {
    flex: 1;
    margin: 0 20rpx;
    // white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    // text-overflow: ellipsis; /* 显示省略号 */
    .setMealName {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30rpx;
      color: #000000e5;
      .setMealNameText {
        width: 240rpx;
        margin-right: 10rpx;
        white-space: nowrap; /* 防止换行 */
        overflow: hidden; /* 限制溢出内容隐藏 */
        text-overflow: ellipsis; /* 使用省略号 */
      }
    }
    .setMealSpecification {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #cccccc;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .setMealStatus {
      margin-top: 8rpx;
      font-size: 22rpx;
      color: rgba(0, 0, 0, 0.5019607843);
    }
  }

  .price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 150rpx;

    .discountPrice {
      .icon {
        color: $uni-color-motif;
        font-size: 24rpx;
        font-weight: normal;
      }
      font-weight: bold;
      font-size: 30rpx;
      color: #000000e5;
    }

    .originalPrice {
      margin-top: 4rpx;
      font-size: 22rpx;
      color: #0000004d;
      text-decoration: line-through;
    }

    .number {
      font-size: 24rpx;
      color: #0000004d;
    }
  }
}
//优惠券计算部分
.compute {
  display: flex;
  flex-direction: column;
  z-index: 0;
  .goodsDisPrice,
  .goodsOriPrice,
  .coupon {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    height: 34rpx;
    font-size: 28rpx;
    .goodsDisPriceText,
    .couponText {
      color: #696969;
    }
  }
}
._dashed {
  border-bottom: 1px dashed #0000001a;
}
//优惠券默认使用部分
.couponTips {
  display: flex;
  justify-content: center;
  align-items: center;

  .couponName {
    display: flex;
    align-items: center;
    font-size: 20rpx;
    padding: 4rpx 8rpx;
    border-radius: 6rpx;
    color: #fff;
    background-color: #fa5151;
  }

  .couponPrice {
    margin: 0 0 0 16rpx;
  }

  .confont {
    font-size: 20rpx;
    color: #00000080;
  }
}
//实付价格
.paidPrice {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 28rpx;
  height: 42rpx;
  font-size: 24rpx;

  .paidPrice_1 {
    color: #00000080;
  }

  .paidPrice_3 {
    margin-left: 12rpx;
    color: #000000e5;
  }

  .paidPrice_4 {
    .icon {
      color: $uni-color-motif;
    }
    font-size: 32rpx;
    color: #000000;
  }
}
// 红字
.paidPrice_2,
.couponPrice,
.goodsOriPriceNumber,
.sumDiscount {
  color: #fa5151;
}
// 订单编号信息
.facilityID,
.goodsNumber,
.goodsDate,
.payWay {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  margin-bottom: 26rpx;
  view:first-child {
    color: #696969;
  }
  .ctrl {
    display: flex;
  }
}
.payWay {
  margin-bottom: 0;
}
.ctrl_CV {
  margin-left: 8rpx;
  color: $uni-color-motif;
}
// 弹出层
.popupBox {
  padding: 0 0 60rpx;
  width: 100%;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  .popupHear {
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .closeText {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .radio {
      display: flex;
      justify-content: space-between;
      width: 650rpx;
      padding: 28rpx 0;
      font-size: 30rpx;
    }
  }
  .button {
    display: flex;
    padding: 14rpx 50rpx;
    justify-content: space-between;
    .buttonClose,
    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 276rpx;
      height: 76rpx;
      font-size: 26rpx;
      border-radius: 44rpx;
      box-sizing: border-box;
    }
    .buttonClose {
      color: $uni-color-motif;
      border: 1px solid $uni-color-motif;
    }
    .submit {
      color: #fff;
      background-color: $uni-color-motif;
    }
    // 按钮高亮
    .active {
      background-color: #00000026;
    }
  }
  ._textarea {
    padding: 0 36rpx;
    width: 100%;
    height: 180rpx;
    border-radius: 20rpx;
    position: relative;
    margin-bottom: 16rpx;
    z-index: 999;
    .textareaTpis {
      position: absolute;
      bottom: 16rpx;
      right: 56rpx;
      color: #999;
      font-size: 24rpx;
    }
  }
}
// 支付成功进入详情页弹出t
._popup {
  display: flex;
  padding-right: 34rpx;
  flex-direction: column;
  ._image {
    width: 628rpx;
    height: 1012rpx;
    border-radius: 40rpx;
    background: #fff;
  }
  .iconfont {
    margin-top: 52rpx;
    text-align: center;
    font-size: 72rpx;
    color: #fff;
  }
}
</style>
